<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>QQ历史头像查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        .card, #avatar-hint{
            max-width: 600px;
            display: block;
            margin: 0 auto;
            margin-top: 30px;
        }

        .avatar, .avatar-div{
            width: 140px;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="card text-center">
        <div class="card-header">
            QQ历史头像查询
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="qq">输入任意QQ号码</label>
                <input type="text" class="form-control" id="qq" placeholder="输入任意QQ号码">
            </div>
            <button type="submit" class="btn btn-primary" onclick="get_avatar()">查询</button>
        </div>
        <div class="card-footer text-muted">
            更多好玩的应用以及该网站源码：<a href="https://pingxonline.com/">https://pingxonline.com/</a>
        </div>
    </div>
    <div id="avatar-hint">

    </div>
    <div id="avatar">

    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="layer/layer.js"></script>
<script src="template-web.js"></script>
<script>
    var index;
    function get_avatar() {
        var qq = $("#qq").val();
        if (qq == ""){
            layer.msg('请填写QQ号码');
        } else{
            index = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            $("#avatar-hint").html("");
            $("#avatar").html("");
            $.ajax({
                url: "main.php",
                data:{
                    qq: qq
                },
                type:"post",
                dataType:"json",
                success: function(result){
                    if (result.error != undefined){
                        layer.msg(result.error);
                        $("<div>").addClass("alert alert-danger").attr("role","alert").text("接口繁忙请重试！").appendTo("#avatar-hint");
                    } else{
                        var total = result.total_num;
                        var avatar_list = result.file_list;
                        $("<div>").addClass("alert alert-primary").attr("role","alert").text("共找到"+total+"个头像").appendTo("#avatar-hint");
                        var html = template('tpl-avatar', avatar_list);
                        document.getElementById('avatar').innerHTML = html;
                    }

                },
                complete: function () {
                    layer.closeAll();
                }
            });
        }

    }
</script>

<script id="tpl-avatar" type="text/html">
    {{each}}
    <div class="avatar-div">
        {{if $value.big == 0}}
        <img class="avatar" src="{{$value.base_url}}{{$value.small}}" alt="头像">
        {{else if $value.big > 0}}
        <img class="avatar" src="{{$value.base_url}}{{$value.big}}" alt="头像">
        {{/if}}
        <p style="text-align: center">{{$value.timestamp}}</p>
    </div>
    {{/each}}
</script>
</html>